<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <title>Character Map</title>
    <link href="/stylesheets/charmap.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <form class="char-search-form" action="" method="get">
      <input
        autocomplete="off"
        class="searchbox"
        type="text"
        name="chq"
        placeholder="Search"
        autofocus="true"
        value="{{query}}"
      />
    </form>
    {% if not chars %}
    <div class="char-no-results">
      No characters found. Try searching again.
    </div>
    {% else %}
    <ul class="char-card-list">
      {% for char in chars %}
      <li class="char-card" tabindex="0">
        <div class="char-selection-target">&#{{char.code}};</div>
        <div class="char-card-block">
          {{char.block}}
        </div>
        <div class="char-card-code">
          {{char.code|hex}}
        </div>
        <div class="char-card-render-container">
          <span class="char-card-render">&#{{char.code}};</span>
        </div>
        <div class="char-card-name">
          {{char.name|escape}}
        </div>
        <div class="char-card-categories">
          <div class="char-card-general-category" title="{{char.category}}">
            {{char.category_code}}
          </div>
          <div class="char-card-bidi-category" title="{{char.bidi}}">
            {{char.bidi_code}}
          </div>
          <div class="char-card-html-entity">
            {% if char.html_entity %}
            {{char.html_entity|escape}}
            {% else %}
            &amp;#{{char.code}};
            {% endif %}
          </div>
        </div>
      </li>
      {% endfor %}
    </ul>
    {% endif %}
    <script type="text/javascript" src="/scripts/charmap-compiled.js"></script>
  </body>
</html>